<template>
  <Blocklayout>
    <template #left>
      <div class="left">
        <el-input
          v-model="left"
          type="textarea"
          rows="10"
          placeholder="输入需要加密的字符"
          resize="none"
          clearable
          v-bind="leftAttrs"
        />
      </div>
    </template>

    <template #menu>
      <slot name="menu"></slot>
    </template>

    <template #right>
      <div class="right">
        <el-input v-model="right" rows="10" type="textarea" readonly resize="none" disabled v-bind="rightAttrs" />
      </div>
    </template>
  </Blocklayout>
</template>

<script lang="ts" setup>
import type { InputProps } from "element-plus";
import { computed } from "vue";

type Props = {
  leftStr: string;
  rightStr: string;
  leftAttrs?: Omit<InputProps, "modelValue">;
  rightAttrs?: Omit<InputProps, "modelValue">;
};

const props = withDefaults(defineProps<Props>(), {
  leftStr: "",
  rightStr: ""
});

const emit = defineEmits(["update:leftStr", "update:rightStr"]);

const left = computed({
  get() {
    return props.leftStr;
  },
  set(val) {
    emit("update:leftStr", val);
  }
});

const right = computed({
  get() {
    return props.rightStr;
  },
  set(val) {
    emit("update:rightStr", val);
  }
});
</script>

<style lang="scss" scoped>
@import "@/styles/var.scss";
.wrap {
  display: flex;
  .left {
    flex: 10;
    box-shadow: $shadow;
    overflow: auto;
    border-radius: 4px;
  }
  .menu {
    flex: 3;
    // box-shadow: $shadow;
    // border-radius: 4px;
    margin: 0 10px;
    overflow-x: hidden;
    overflow-y: auto;
  }
  .right {
    flex: 10;
    box-shadow: $shadow;
    overflow: auto;
    border-radius: 4px;
  }

  :deep(.el-textarea > .el-textarea__inner) {
    &:hover {
      box-shadow: none;
    }
    &:focus {
      outline: none;
      box-shadow: none;
    }
  }
}
</style>
